<!doctype html>
<html xmlns:th="www.thymeleaf.org">
<meta charset="utf-8">
<head th:replace="index::head"></HEAD>
<head>
<style type="text/css">
[v-cloak] {
    display: none;
}

.tr1>th:nth-child(1) {
	width: 200px
}
.tipad{
	margin: 10px;
}
.content{
	max-height: 200px;
	overflow: hidden;
	margin: 10px
}
/* .content:hover{
	max-height: 100%;
} */
body{
	overflow: scroll;
}
</style>
</head>
<BODY>
	<header th:replace="index::#ph"></header>
	<!--      主体        -->
	<main v-cloak>
		<!--      导航        -->
		<div style="padding: 3px 8px">
			<span class="layui-breadcrumb">
				<a href="/">作业论坛首页</a>
				<a :href="'to_list?'+task.course_id"> {{task.cname}}</a>
				<a>
					<cite>{{task.name}}</cite>
				</a>
			</span>
		</div>
		<!--      本页主题的标题        -->
		<DIV>
			<TABLE cellSpacing="0" cellPadding="0" width="100%">
				<TR>
					<TH class="h" style="font-size: 1.5em">
						主题： {{task.cls_sn}}班：{{task.name}}
						</TH>
					<TH class="h" style="text-align: right;">
						<btn v-if="task.cls_sn == userClsSn && tasklog.id==null" :url="'to_tasklog?task.id='+param('id')">提交作业</btn>
						<btn v-if="task.cls_sn == userClsSn && tasklog.id" :url="'to_tasklog?id='+tasklog.id">查看作业</btn> 
						<btn @click="edit" >{{isEdit == true ? "容朕想想" : "朕有话说" }}</btn>
					</TH>
				</TR>
				<TR class="tr2">
					<TD colspan="20" style="text-align: left">
						<span class="layui-badge layui-bg-orange">
							<a :href="replace('to_tasklogs?id=[1]&clsSn=[2]',task.id,task.cls_sn)">未提交人数：{{task.user_all-task.user_fnh}}</a>
						</span>
						<span class="layui-badge layui-bg-green">
							<a :href="replace('to_tasklogs?id=[1]&clsSn=[2]',task.id,task.cls_sn)">已提交人数：{{task.user_fnh}}</a>
						</span>
					</TD>
				</TR>
			</TABLE>
		</DIV>
		<!--      主题        -->
		<DIV class="t">
			<TABLE style="table-layout: fixed"
				cellSpacing="0" cellPadding="0" width="100%">
				<TR class="tr1">
					<TH style="width: 200px;text-align: center;"><B>楼主：{{task.uname}}</B><BR />
						<img :src="task.head" style="height: 80px"/><BR />
						注册：{{castDateFormat(task.utime)}}<BR /></TH>
					<TH>
						<p class="content" v-html="task.intro"></p>
						<DIV class="tipad gray" style="text-align: center;">
							<div style="float: left;width: 160px;text-align: left;">发表：{{castDateFormat(task.in_time)}}</div>
							<a href="javascript:;" class="lookall" style="font-size: 1.3em;font-weight: bolder;display: none;">
								查看全部内容
							</a>
							<div style="float: right;width: 160px;text-align: right;">顶楼</div>
						</DIV>
					</TH>
				</TR>
			</TABLE>
		</DIV>
		<div v-show="isEdit==true" style="background-color: #eee;padding: 5px 0px;width: 99.95%">
		<div style="width:95%;margin: 10px auto">
		    <h1 id="editreply">朕想说：</h1>
		    <script id="editor" type="text/plain" style="width:100%;height: 100px"></script>
			<div style="text-align: center;margin-top: 7px">
			<span id="emotion" style="cursor: pointer; margin-right: 10px"><img src="image/face/baiyan.gif" width="20" height="20" alt="" /> 表情</span>
			<btn @click="save"> 昭告天下 </btn>
			<btn @click="edit" cls="layui-btn-primary"> 收回成命 </btn>
			</div>
			<textarea id="saytext" style="display: none;"></textarea>
		</div>
		</div>
		<DIV class="t" v-for="(c,i) in cmts.content">
			<TABLE style="table-layout: fixed"
				cellSpacing="0" cellPadding="0" width="100%">
				<TR class="tr1">
					<TH v-if="c.inUser" style="width: 200px;text-align: center;">
						<B>回帖人：{{c.inUser.name}}</B><br>
						<img :src="nvl(c,'inUser.head')" style="height: 70px"/><BR /> 注册于：{{c.inUser.inTime}}
					</TH>
					<TH v-else style="width: 200px;text-align: center;">
						<B>回帖人：神秘客</B>
						<img src="image/head/15.gif" style="height: 70px"/><BR /> 注册于：一亿光年以前
					</TH>
					<TH>
						<p class="content" v-html="c.content"></p>
						<DIV class="tipad gray" style="text-align: center;">
							<div style="float: left;width: 160px;text-align: left;">发表：{{c.inTime}}</div>
							<a href="javascript:;" class="lookall" style="font-size: 1.3em;font-weight: bolder;display: none;">
								查看全部内容
							</a>
							<div style="float: right;width: 160px;text-align: right;">{{cmts.size * cmts.number + i + 1}}楼</div>
						</DIV>
					</TH>
				</TR>
			</TABLE>
		</DIV>
		<load url="user/myinfo"	data="myinfo"></load>
		<load :url="'hwctask/task/sumTask?id='+param('id')"	data="task"></load>
		<load :url="'getTaskLog?task.id='+param('id')" data="tasklog"></load>
		<page :url="'hwctask/comment/find?order=id!&task.id='+param('id')" data="cmts"></page>
	</main>
	<script type="text/javascript">
		var userClsSn = `[[${session?.loginedUser?.clsSn}]]`;
		var v = vue("main","isEdit","cmts","comment","myinfo",{
			data:{
				task:{name:""},
				tasklog:{id:""}
			},
			created(){
				this.isEdit = param('todo') == 'toReply';
			},
			updated(){
				layui.$(".content img").each((i,o)=>{
					if(!o.added){
						o.added = true;
						let $o = layui.$(o);
						$o.click(()=>{
							open(o.src);
						});
						$o.load(()=>{
							// 每个图片加载都会更新div高度, 要重新计算
							this.setLookAll();
						});
					}
					this.setLookAll();
				});
				this.setLookAll();
			},
			methods : {
				setLookAll(){
					layui.$(".lookall").each((i,o)=>{
						if(!o.added){
							let $a = layui.$(o);
							let c = $a.parent().parent().find(".content")[0];
							if(c.scrollHeight > c.offsetHeight){
								$a.click(()=>{
									if(o.innerText == '查看全部内容'){
										c.style.maxHeight = "100%";
										o.innerText = "收起部分内容";
									} else {
										c.style.maxHeight = "200px";
										o.innerText = "查看全部内容";
									}
								});
								$a.css("display","inline");	
								o.added = true;
							}
						}
					});
				},
				edit(){
					if(userClsSn){
						if ( this.isEdit = this.isEdit == true ? false : true) {
							this.$nextTick(function () {
								location.href="#editreply";
							})
						}
					} else {
						location.href="to_login?todo=toReply";
					}
				},
				save(){
					this.comment["task.id"] = this.task.id;
					this.comment.content = ue.val();
					post("hwcindex/reply",usp(this.comment),res=>{
						this.comment.inUser = this.myinfo;
						this.cmts.content.unshift(this.comment);
						if(this.cmts.content.length>10){
							this.cmts.content.pop();
						}
						this.isEdit = false;
						ue.setContent("");
						this.comment = {};
					});
				}
			}
		});
		layui.element.render();
	</script>
	<!-- 导入页脚 -->
	<footer th:replace="index::footer"></footer>
    <div th:replace="tasklog::ue(空)"></div>
</BODY>
</HTML>